<template>
  <div class="manage">
    <div class="tenancemain">
      <div class="surface"> 
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="脚本名称">
            <el-input v-model="formInline.name" placeholder="脚本名称"></el-input>
          </el-form-item>
          <el-form-item label="依赖任务">
            <el-input v-model="formInline.relyon" placeholder="依赖任务"></el-input>
          </el-form-item>
          <el-form-item label="是否临时">
            <el-select v-model="formInline.istemporary" placeholder="请选择">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
     </div>
     <div>
        <el-button-group class="btngroup">
        <el-button type="primary" icon="el-icon-plus" @click="add()" >新建</el-button>
        <el-button type="primary" icon="el-icon-edit">编辑</el-button>
        <el-button type="primary" icon="el-icon-refresh">刷新</el-button>
       
      </el-button-group>
      <el-button-group class="" style="float:right;">
         <el-button type="primary" icon="el-icon-check">单独执行</el-button>
        <el-button type="primary" icon="el-icon-check">执行任务和依赖</el-button>
      </el-button-group>
     </div>
    
    <el-table
      :data="tableData"
      size="small"
      max-height="400"
      style="width: 100%">
      <el-table-column
      width="55">
      <template  slot-scope="scope">
        <el-radio class="radio" v-model="radio" :label="scope.row.id"></el-radio>
      </template>
    </el-table-column>
      <el-table-column
        prop="jobGroup"
        label="主题"
        align='center'
        width="80">
      </el-table-column>
      <el-table-column
        label="脚本信息"
        align='center'
        >
        <el-table-column
        prop="jobName"
        label="任务名称"
        align='center'
        width="180">
        <template  slot-scope="scope">
              <a @click="watchSurface(scope.row.jobName)" class="surfaceA" href="javascript:;">{{scope.row.jobName}}</a>
        </template>
        </el-table-column>
        <el-table-column
          prop="insertTm"
          align='center'
          label="创建时间">
          <template slot-scope="scope">{{ scope.row.insertTm | formatDate  }}</template>
        </el-table-column>
        <el-table-column
          prop="jobCron"
          align='center'
          label="CROM表达式"
          width="180">
        </el-table-column>
        <el-table-column
          prop="jobDesc"
          align='center'
          label="依赖任务"
          width="180">
        </el-table-column>
      </el-table-column>
      <el-table-column
        label="操作"
        align='center'
        width="180">
        <template  slot-scope="scope">
            <el-button @click="backups(scope.row)" type="primary" size="small">入参编辑</el-button>
        </template>
      </el-table-column>
  </el-table>
  <el-pagination class="page"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="page.pageNum"
    :page-sizes="[10, 15, 20, 15]"
    :page-size="page.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
    <el-dialog :title="diaTitle" :visible.sync="isTable">
        <el-table :data="tableList2" >
      <template v-for="(col,index) in cols">
        <el-table-column  :prop="col.prop" :label="col.label" :key="index" >
        </el-table-column>
      </template>
        </el-table>
        <el-pagination
        class="page"
          background
          layout="prev, pager, next"
          :total="3">
        </el-pagination>
    </el-dialog>
    <el-dialog title="入值传参" :visible.sync="formDia">
        
            <el-button type="primary" @click="addparam()" size="small">新增入参</el-button>
          <el-table :data="parameters" size="mini">
          <el-table-column label="参数名称">
            <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="small" v-model="scope.row.name" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.name }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="参数值">
            <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="small" v-model="scope.row.value" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.value }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="参数说明">
            <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="small" v-model="scope.row.desc" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.desc }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button @click="scope.row.is_edit = true"  type="text" v-if="scope.row.is_edit==false" size="small">编辑</el-button>
                 <el-button v-if="scope.row.is_edit" @click="scope.row.is_edit = false" type="text" size="small">保存</el-button>
                <el-button @click="deletePars(scope.row.id)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button @click="formDia = false">取 消</el-button>
            <el-button type="primary" @click="formDia = false">确 定</el-button>
        </div>
    </el-dialog>
     <el-dialog title="新增功能任务" :visible.sync="isaddform" class="addDialog">
        <el-form :model="formadd" class="addform">
            <table>
              <tr>
                <td>
                  <el-form-item label="任务英文名" :label-width="formLabelWidth">
                    <el-input  v-model="formadd.jobName" auto-complete="off"></el-input>
                </el-form-item>
                </td>
                <td>
                  <el-form-item label="所属主题" :label-width="formLabelWidth">
                    <el-input  v-model="formadd.jobGroup" auto-complete="off"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <el-form-item label="cron表达式" :label-width="formLabelWidth">
                   <el-input  v-model="formadd.jobCron" auto-complete="off" placeholder="为空表示立即执行"></el-input>
                </el-form-item>
                </td>
                
              </tr>
              <tr>
                <td colspan="2">
                  <el-form-item label="上传脚本" :label-width="formLabelWidth">
                    <el-upload
                    class="upload-demo"
                    ref="upload"
                    :before-upload="beforeUpload"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                    
                  </el-upload>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <el-form-item label="任务说明" :label-width="formLabelWidth">
                    <el-input v-model="formadd.jobDesc" type="textarea" auto-complete="off"></el-input>
                </el-form-item>
                </td>
              </tr>
            </table>
            <el-button type="primary" @click="addTable" size="small">新增任务依赖</el-button>
          <el-table :data="formadd.rows" size="mini">
          <el-table-column label="任务主题">
            <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="small" v-model="scope.row.jobGroup" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.jobGroup }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="任务名称">
            <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="small" v-model="scope.row.jobName" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.jobName }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button @click="scope.row.is_edit = true"  v-if="scope.row.is_edit==false" type="text" size="small">编辑</el-button>
                 <el-button v-if="scope.row.is_edit" @click="scope.row.is_edit = false" type="text" size="small">保存</el-button>
                <el-button @click="delectAdd(scope.row.id)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="isaddform = false">取 消</el-button>
            <el-button type="primary" @click="addform()">确 定</el-button>
        </div>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import headnav from '@/components/HeadNav';
import {formatDate} from '@/utils/dateFomart'
import {getJobDetail,addManage,addFile} from "@/api/manage"
export default {
  name: 'tenance',
  components:{
    headnav
  },
   data () {
    return {
        surface:'',
        fileList:[],
        page:{
          pageNum:1,
          pageSize:10
        },
        total:1,
        isTable:false,
        isaddform:false,
        formDia:false,
        radio:'',
        diaTitle:"",
         formInline: {
          name: '',
          relyon:'',
          istemporary: '否'
        },
        formadd:{
          
        jobGroup:"",
         insertTm:"",
         jobCron:"",
         jobDesc:"",
         jobName:"",
         rows:[
            {
              id:2,
              jobGroup:"",
              jobName:"",
              is_edit:true,
            }
          ],
        },

       tableData: [
         {
           id:11,
           
           jobGroup:"tmp",
         insertTm:1534902220000,
         jobCron:"28 51 11 01 08 ? 2018",
         jobDesc:"test006",
         jobName:"tmp_test006"
         },
       {
         id:10,
         jobGroup:"tmp",
       insertTm:1534902217000,
       jobCron:"28 51 11 01 08 ? 2018",
       jobDesc:"test005",
       jobName:"tmp_test005"}
       ],
        cols:[
        {
          label:"依赖任务名称",
          prop:"depenJobName",
          type:"normal",

        },
        {
          label:"依赖任务主题",
          prop:"depenJobGroup",
          type:"normal",
          
        },
        {
          label:"状态",
          prop:"state",
          type:"normal",
          
        },
      ],
      
      parameters:[
        {
          id:0,
          name:"",
          value:"",
          desc:'',
          is_edit:true,
        }
      ],
       tableList2:[
        {depenJobName:"sta_001",
        depenJobGroup:"sta",
        state:"TASK_FINISHED"
        }
        ,
        {depenJobName:"dwb_001",
        depenJobGroup:"dwb",
        state:"TASK_FINISHED"
        }
        ,
        {depenJobName:"dwb_002",
        depenJobGroup:"dwb",
        state:"TASK_RUNNING"
        }
      ],
      formLabelWidth: '120px'
    }
  },
  filters: {
        formatDate(time) {
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm');
        }
    },
    mounted(){
      this.getJoblist(this.page);
    },
  methods:{
    onSubmit(){
      comsole.log(this.addform)
    },
    submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
    addTable(){
      let id=this.formadd.rows.length
      this.formadd.rows.push({
          id:id,
          jobGroup:"",
          jobName:"",
          is_edit:true,
        })
    },
     handleSizeChange(val) {
       this.page.pageSize=val;
        this.getJoblist(this.page);
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page.pageNum=val
         this.getJoblist(this.page);
        console.log(`当前页: ${val}`);
      },
      getJoblist(page){
        getJobDetail(page).then(res=>{
          console.log(res);
          if(res.data.errorNo=="0"){
            this.tableData=res.data.results.list;
            this.total=res.data.results.totals;
          }
        })
      },
      watchSurface(val){
          console.log(val);
          this.isTable=true;
          this.diaTitle=val+"依赖任务执行情况";
      },
    backups(data){
        this.formDia=true;
        console.log(data);
    },
    add(){
      this.isaddform=true;
    },
    beforeUpload (file) {
    console.log(file)
      let fd = new FormData()
      fd.append('jobFile', file)
      fd.append('jobName', this.formadd.jobName)
      fd.append('jobGroup', this.formadd.jobGroup)
    // console.log(fd)
      addFile(fd).then(res => {
        console.log(res)
      })
      return true
     },
    addform(){
      console.log(this.formadd)
      addManage(this.formadd).then(res=>{
        let result=res.data.errorMsg
        if(res.data.errorNo=="0"){
          this.$message({
            type:"success",
            message:result
          })
          this.getJoblist(this.page);
          this.isaddform = false
        }else{
          this.$message({
            type:"error",
            message:result
          })
        }
      })
      
    },
    addparam(){
      let id=this.parameters.length
      this.parameters.push({
          id:id,
          name:"",
          value:"",
          desc:'',
          is_edit:true,
        })
    },
    delectAdd(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(() => {
          for(var i = 0; i < this.rows.length; i++) {
							if(this.rows[i].id == id) {
								this.rows.splice(i, 1);
							}
						}
				}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
				});
    },
    deletePars(id){
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          for(var i = 0; i < this.parameters.length; i++) {
							if(this.parameters[i].id == id) {
								this.parameters.splice(i, 1);
							}
						}
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        console.log(data);
    }
  }
}
</script>

<style scoped>
.tenancemain{
    padding: 8px;
}
.page{
    text-align: center
}
a{
  color: blue;
  text-decoration: none;
}
.btngroup{
  padding: 8px 0px;
}
.addform .el-form-item{
  margin: 0px;
}
.addDialog .el-dialog__body{
  padding: 10px;
}
input{
  height: 30px;
  line-height: 30px;
}
.radio{
  width: 20px;
  overflow: hidden;
}
</style>